<route lang="json5" type="page">
{
  layout: 'theme', // 使用主题
  style: {
    navigationStyle: 'custom'
  }
}
</route>

<template>
  <view class="min-h-screen flex flex-col bg-[#F3F5F7] pb-20 box-border">
    <!-- 顶部导航栏 -->
    <view
      class="h-400rpx w-full relative bg-top bg-no-repeat bg-[length:100%_auto] bg-[url('/static/images/shop/active-top-bg.png')]"
    >
      <!-- 返回按钮 -->
      <view class="pos-absolute left-30rpx top-60rpx" @click="handleBack">
        <wd-icon name="thin-arrow-left" size="30rpx" color="#fff"></wd-icon>
      </view>

      <!-- 活动标题 -->
      <view class="h-full w-full flex flex-col items-center justify-center">
        <wd-img
          class="mt-40rpx"
          height="138rpx"
          mode="heightFix"
          :src="`/static/images/shop/active-${activityType}.png`"
        ></wd-img>
        <view class="top-sub-tip text-34rpx text-[#EEAAB5] mt-40rpx tracking-15rpx">让选择更简单</view>
      </view>
    </view>

    <!-- 活动商品列表 -->
    <view class="px-20rpx mt-20rpx">
      <view class="bg-white p-20rpx rounded-12rpx mb-20rpx">
        <shop-title :title="`${activityType === 1 ? '人气爆款' : '黄金专场'}精选`" />
      </view>
      <view class="grid grid-cols-2 gap-20rpx">
        <goods-item v-for="item in goodsList" :key="item.id" :goods="item" @click="handleGoodsClick(item)" />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
// 如果需要手动导入组件，可以使用以下方式
// import GoodsItem from '@/components/goods-item.vue'
// import ShopTitle from '@/components/shop-title.vue'

// 活动类型 1: 人气爆款, 2: 黄金专场
const activityType = ref<number>(1)

onLoad((options?: { type?: string | number }) => {
  activityType.value = Number(options?.type) || 1
})

// 当前时间
const currentTime = ref('')
// 更新时间
const updateTime = () => {
  const now = new Date()
  const hours = now.getHours().toString().padStart(2, '0')
  const minutes = now.getMinutes().toString().padStart(2, '0')
  currentTime.value = `${hours}:${minutes}`
}

// 商品列表数据
const goodsList = ref([
  {
    id: 1,
    image: '/static/images/home/goods-1.png',
    title: '热血运动手表运动版',
    price: '99.00',
    sold: '1000+'
  },
  {
    id: 2,
    image: '/static/images/home/goods-1.png',
    title: '精品护肤水',
    price: '199.00',
    sold: '880+'
  },
  {
    id: 3,
    image: '/static/images/home/goods-1.png',
    title: '高档智能手机',
    price: '5999.00',
    sold: '760+'
  },
  {
    id: 4,
    image: '/static/images/home/goods-1.png',
    title: '智能家居套装',
    price: '399.00',
    sold: '650+'
  },
  {
    id: 5,
    image: '/static/images/home/goods-1.png',
    title: '精美音箱套装',
    price: '499.00',
    sold: '540+'
  },
  {
    id: 6,
    image: '/static/images/home/goods-1.png',
    title: '限量版手表',
    price: '899.00',
    sold: '320+'
  }
])

// 处理商品点击
const handleGoodsClick = (goods: any) => {
  uni.showToast({
    title: `点击了商品: ${goods.title}`,
    icon: 'none'
  })
  // 实际应用中跳转到商品详情页
  // uni.navigateTo({
  //   url: `/pages/shop/detail?id=${goods.id}`
  // })
}

// 处理返回按钮点击
const handleBack = () => {
  uni.navigateBack()
}

// 页面初始化
onMounted(() => {
  // 更新当前时间
  updateTime()
  setInterval(updateTime, 60000) // 每分钟更新一次时间

  // 从URL获取活动类型
  try {
    // 尝试获取页面参数
    const pages: any[] = getCurrentPages()
    const page = pages[pages.length - 1]
    const options = page?.options || {}

    if (options?.type) {
      activityType.value = Number(options.type) || 1
    }
  } catch (error) {
    console.error('获取页面参数错误:', error)
  }
})
</script>

<style lang="scss" scoped>
.top-sub-tip {
  display: flex;
  align-items: center;

  &::before,
  &::after {
    display: block;
    width: 100rpx;
    height: 34rpx;
    content: '';
    background: url('/static/images/shop/active-title-icon.png') no-repeat center center/contain;
  }

  &::before {
    margin-right: 30rpx;
    transform: rotate(180deg);
  }

  &::after {
    margin-left: 30rpx;
  }
}
</style>
